<template>
  <div class="icons">
    <ul class="iconWrap">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(page, index) of pages" :key="index">
          <li v-for="item of page" :key="item.id">
            <img :src="item.url" alt="" />
            <p class="iconDesc" v-text="`热门景点${item.id}`"></p>
          </li>
        </swiper-slide>
      </swiper>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props: {
    iconList: {
      type: [Array],
      required: true
    }
  },
  data () {
    return {
      swiperOption: {
        autoplay: false
      }
    }
  },
  computed: {
    pages () {
      const page = []
      const allLength = this.iconList.length
      const group = Math.ceil(allLength / 8)
      for (let i = 0; i < group; i++) {
        if (!page[i]) {
          page[i] = []
        }
        page[i] = this.iconList.slice(i * 8, (i + 1) * 8)
      }
      return page
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@styles/varibles.styl'
@import '~@styles/mixins.styl'
.icons{
  overflow hidden
  .iconWrap{
    overflow hidden
    >>>.swiper-container{
      height 0
      padding-bottom 50%
    }
    li{
      float left
      height 0
      text-align center
      width 25%
      padding-bottom 25%
      overflow hidden
      img{
        width .88rem
        margin 0.25rem 0
      }
      .iconDesc{
        padding 0 0.3rem
        height 0.44rem
        line-height 0.44rem
        color $ftColor
        ellipsis()
      }
    }
  }
}
</style>
